import EventEmitter from "@/eventEmitter";
import GUI from "lil-gui";
import EllipseNodeGraph from "../shape/ellipse";
export default class EllipseGraphProperty extends EventEmitter {
  option = {
    x: 0,
    y: 0,
    radiusx: 0,
    radiusy: 0,
    background: "",
    isFill: true,
  };
  dom: HTMLDivElement;
  gui!: GUI;
  controllerMap = new Map();
  constructor() {
    super();
    this.dom = document.createElement("div");
    this.dom.style.width = "100%";
    this.dom.style.height = "100%";
  }
  init(node: EllipseNodeGraph) {
    this.gui = new GUI({ container: this.dom });
    this.gui.domElement.style.width = "100%";
    this.option.radiusx = node.radius.x;
    this.option.radiusy = node.radius.y;
    this.option.x = node.center.x;
    this.option.y = node.center.y;
    this.option.background = node.background;
    this.option.isFill = node.isFill;
    const radiusxController = this.gui
      .add(this.option, "radiusx")
      .onChange((value: number) => {
        this.onChange("radiusx", value);
      });
    this.controllerMap.set("radiusx", radiusxController);
    const radiusyController = this.gui
      .add(this.option, "radiusy")
      .onChange((value: number) => {
        this.onChange("radiusy", value);
      });
    this.controllerMap.set("radiusy", radiusyController);
    const xController = this.gui
      .add(this.option, "x")
      .onChange((value: number) => {
        this.onChange("x", value);
      });
    this.controllerMap.set("x", xController);
    const yController = this.gui
      .add(this.option, "y")
      .onChange((value: number) => {
        this.onChange("y", value);
      });
    this.controllerMap.set("y", yController);
    const backgroundController = this.gui
      .addColor(this.option, "background")
      .onChange((value: string) => {
        this.onChange("background", value);
      });
    this.controllerMap.set("background", backgroundController);
    const isFillController = this.gui
      .add(this.option, "isFill")
      .onChange((value: boolean) => {
        this.onChange("isFill", value);
      });
    this.controllerMap.set("isFill", isFillController);
  }
  destroy() {
    this.gui.destroy();
    this.clear();
  }
  onChange(propertyName: string, propertyValue: any) {
    this.emit("propertyChange", {
      propertyName,
      propertyValue,
    });
  }
  setValue(propertyName: string, propertyValue: any) {
    if (!this.option.hasOwnProperty(propertyName)) {
      return;
    }
    (this.option as any)[propertyName] = propertyValue;
    this.controllerMap.get(propertyName).updateDisplay();
  }
  setOption(node: EllipseNodeGraph) {
    for (let key in this.option) {
      switch (key) {
        case "radiusx":
          this.option.radiusx = node.radius.x;
          break;
        case "radiusy":
          this.option.radiusy = node.radius.y;
          break;
        case "background":
          this.option.background = node.background;
          break;
        case "isFill":
          this.option.isFill = node.isFill;
          break;
        case "x":
          this.option.x = node.center.x;
          break;
        case "y":
          this.option.y = node.center.y;
          break;
        default:
          break;
      }
      this.controllerMap.get(key).updateDisplay();
    }
  }
}
